<template>
	<om-page :title="pageTitle">
		<view class="page__bd">
			<uni-list>
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item @click='infoTab(item)' :title="item.clockDate" :note="item.week" :avatar="index + 1"
						avatarSize="lg" :avatarBgColor="logoColors[0].name">
						<view slot="footer">
							<view
								v-if="item.unAttendTimes || item.lateTimes || item.earlyTimes || item.otUnattendTimes">
								<view v-if="item.unAttendTimes">
									<view class="footer-cls">未考勤次数:{{ item.unAttendTimes }}</view>
								</view>
								<view v-if="item.lateTimes">
									<view class="footer-cls">迟到次数:{{ item.lateTimes }}</view>
								</view>
								<view v-if="item.earlyTimes">
									<view class="footer-cls">早退次数:{{ item.earlyTimes }}</view>
								</view>
								<view v-if="item.otUnattendTimes">
									<view class="footer-cls">加班未考勤次数:{{ item.otUnattendTimes }}</view>
								</view>
							</view>
							<view v-else>
								<view class="footer-cls">加班考勤异常</view>
							</view>
						</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from "../../../static/js/listLoad.js"
	const app = getApp();

	export default {
		data() {
			return {
				logoColors: this.ColorList,
				commonData: {},
				scrollTop: 0,
				pageTitle: ""
			}
		},
		methods: {
			infoTab(item) {
				this.om.getPageInfo(item.infoShow, '详细信息');
			}
		},
		onLoad: function(options) {
			let _that = this
			this.pageTitle = options.title || "异常考勤"
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
			listLoad.initData(_that, 'wxAttend/getAttendExList')
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},

		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			listLoad.reachBottom(this)
		}
	};
</script>

<style>
	.footer-cls {
		font-size: 15px;
	}
</style>